<template>
  <el-form :model="registerForm" :rules="rules" ref="Form" label-width="100px" style="background-color: #d5d5d5" size="default" class="login-form">
    <h1 style="text-align: center">注册中心</h1>
    <el-form-item label="姓名" prop="name">
      <el-input v-model="registerForm.name"></el-input>
    </el-form-item>
    <el-form-item prop="password" label="密码">
      <el-input
          v-model="registerForm.password"
          type="password"
          size="large"
          auto-complete="off"
          :placeholder="$t('login.password')"
      >
        <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
      </el-input>
    </el-form-item>
    <el-form-item prop="confirmPassword" label="确认密码">
      <el-input
          v-model="registerForm.confirmPassword"
          type="password"
          size="large"
          auto-complete="off"
          :placeholder="$t('login.confirm')"
      >
        <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
      </el-input>
    </el-form-item>
    <el-form-item prop="sex" label="性别">
      <el-radio-group v-model="registerForm.sex" style="margin-left: 4px">
        <el-radio label="男">
          <svg-icon
              style="width: 1.3em;height: 1.3em;"
              icon-class="man" /> 男
        </el-radio>
        <el-radio label="女">
          <svg-icon
              style="width: 1.6em;height: 1.6em;margin-top: 0.2em"
              icon-class="woman" /> 女
        </el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item prop="hobby" label="爱好">
      <el-checkbox-group v-model="registerForm.hobby" style="margin-left: 4px">
        <el-checkbox label="Java"></el-checkbox>
        <el-checkbox label="C/C++"></el-checkbox>
        <el-checkbox label="Python"></el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="出生日期" prop="date">
      <el-date-picker
          v-model="registerForm.date"
          type="date"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          placeholder="选择日期">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="文化程度" prop="education">
      <el-select v-model="registerForm.education" placeholder="请选择文化程度">
        <el-option label="小学" value="小学"></el-option>
        <el-option label="初中" value="初中"></el-option>
        <el-option label="高中" value="高中"></el-option>
        <el-option label="大学" value="大学"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="所在省份" prop="province">
      <el-select v-model="registerForm.province" placeholder="请选择所在省份">
        <el-option label="山东" value="山东"></el-option>
        <el-option label="北京" value="北京"></el-option>
        <el-option label="上海" value="上海"></el-option>
        <el-option label="吉林" value="吉林"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="联系地址" prop="address">
      <el-input v-model="registerForm.address"></el-input>
    </el-form-item>
    <el-form-item label="邮政编码" prop="code">
      <el-input v-model="registerForm.code"></el-input>
    </el-form-item>
    <el-form-item label="联系电话" prop="phone">
      <el-input v-model="registerForm.phone"></el-input>
    </el-form-item>
    <el-form-item label="电子邮箱" prop="email">
      <el-input v-model="registerForm.email"></el-input>
    </el-form-item>
    <el-form-item label="自我介绍" prop="desc">
      <el-input type="textarea" v-model="registerForm.desc"></el-input>
    </el-form-item>
    <el-form-item prop="birth" label="上传头像" style="margin-top: 30px">
      <div class="text-center" style="margin-top: -15px">
        <RegisterAvatar />
      </div>
    </el-form-item>
    <el-form-item>
      <el-button @click="resetForm()" type="danger">重置</el-button>
      <el-button type="primary" @click="submitForm()">提交</el-button>
      <el-button type="warning">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import {computed, reactive} from "vue";
import useUserStore from "@/store/modules/user";
import Cookies from "js-cookie";
import {useI18n} from "vue-i18n";
import RegisterAvatar from "@/components/Wind/RegisterAvatar";


const { t } = useI18n()

const userStore = useUserStore()

const { proxy } = getCurrentInstance();
const router = useRouter();
// 注册表单 获取自pinia库
const registerForm = computed(()=> {
  return userStore.registerFormMain
})

const equalToPassword = (rule, value, callback) => {
  if (registerForm.value.password !== value) {
    callback(new Error(t('register.errorPwd')));
  } else {
    callback();
  }
};

const rules = reactive({
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, trigger: "blur", message: t('register.password') },
    { min: 5, max: 20, message: t('register.passwordMessage'), trigger: "blur" }
  ],
  confirmPassword: [
    { required: true, trigger: "blur", message: t('register.passwordAgain') },
    { required: true, validator: equalToPassword, trigger: "blur" }
  ],
  sex: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ],
  date: [
    { type: 'date', required: true, message: '请选择出生日期', trigger: 'change' }
  ],
  education: [
    { required: true, message: '请选择文化程度', trigger: 'change' }
  ],
  province: [
    { required: true, message: '请选择所在省份', trigger: 'change' }
  ],
  address: [
    { required: true, message: '请输入联系地址', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入邮政编码', trigger: 'blur' },
  ],
  phone: [
    {  required: true, message: '请输入联系电话', trigger: 'blur' },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: '请输入正确的手机号码',
      trigger: 'blur'
    }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
  ],
  category: [
    { required: true, message: '请选择类别', trigger: 'change' }
  ],
  level: [
    { required: true, message: '请选择报考层次', trigger: 'change' }
  ],
  speciality: [
    { required: true, message: '请选择报考专业', trigger: 'change' }
  ],
  desc: [
    { required: false, message: '请填写备注', trigger: 'blur' }
  ]
})

function submitForm() {
  proxy.$refs.Form.validate((valid,error) => {
    if (valid) { // 校验成功
      sessionStorage.setItem('registerForm', JSON.stringify(registerForm.value));
      router.push({ path: "/register-success" });
    } else { // 失败
      // sessionStorage.setItem('registerForm', JSON.stringify(registerForm.value));
      // router.push({ path: "/register-success" });
      alert('失败！');
      return false;
    }
  })
}
function resetForm() {
  proxy.$refs.Form.resetFields();
}

</script>

<style lang="scss" scoped>
.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 70%;
  margin: 2% 15%;
  padding: 25px 25px 5px 25px;
  .el-input {
    height: 40px;
    input {
      height: 40px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 0px;
  }
}
</style>
